<template>
<el-dialog
  v-model="dialogVisible"
  :title="formData.userId ? '编辑用户' : '新建用户'"
  width="600px"
  destroy-on-close
>
  <el-form
    ref="formRef"
    :model="localFormData"
    :rules="rules"
    label-width="100px"
    label-position="right"
  >
    <el-form-item label="用户名" prop="username">
      <el-input
        v-model="localFormData.username"
        placeholder="请输入用户名"
        clearable
      />
    </el-form-item>

    <el-form-item label="手机号" prop="phone">
      <el-input
        v-model="localFormData.phone"
        placeholder="请输入手机号"
        clearable
        maxlength="11"
      />
    </el-form-item>

    <el-form-item label="性别" prop="gender">
      <el-select v-model="localFormData.gender" placeholder="请选择性别">
        <el-option label="男" :value="0" />
        <el-option label="女" :value="1" />
      </el-select>
    </el-form-item>

    <el-form-item label="积分" prop="points">
      <el-input-number
        v-model="localFormData.points"
        :min="0"
        :step="100"
        controls-position="right"
      />
    </el-form-item>

    <el-form-item label="状态" prop="isActive">
      <el-radio-group v-model="localFormData.isActive">
        <el-radio :label="0">启用</el-radio>
        <el-radio :label="1">禁用</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="密码" prop="password" v-if="!localFormData.userId">
      <el-input
        v-model="localFormData.password"
        type="password"
        placeholder="请输入密码"
        show-password
      />
    </el-form-item>
  </el-form>

  <template #footer>
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="handleConfirm">确定</el-button>
  </template>
</el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import type { User } from '@/common/types/userType'

const props = defineProps({
  modelValue: Boolean,
  formData: {
    type: Object as () => Partial<User>,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue', 'submit'])

const dialogVisible = ref(false)
const formRef = ref<FormInstance>()
const localFormData = ref<Partial<User>>({})

// 表单验证规则
const rules = ref<FormRules>({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  points: [
    { type: 'number', min: 0, message: '积分不能小于0', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
  ]
})

// 监听外部数据变化
watch(() => props.formData, (val) => {
  localFormData.value = { ...val }
}, { immediate: true })

// 处理对话框显示状态
watch(() => props.modelValue, (val) => {
  dialogVisible.value = val
})

watch(dialogVisible, (val) => {
  emit('update:modelValue', val)
  if (!val) formRef.value?.resetFields()
})

// 提交处理
const handleConfirm = async () => {
  console.log('提交表单数据:', localFormData.value)
  try {
    const valid = await formRef.value?.validate()
    if (valid) {
      emit('submit', localFormData.value)
      dialogVisible.value = false
    }
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}
</script>

<style scoped>
.el-input-number {
  width: 100%;
}
</style>
